<template>
  <div style="background-color: white">
    <!-- 跑马灯  -->
    <div id="back-button"></div>
    <div>
      <img src="../../../assets/drug1.jpg" style=" width:1200px; height:496px; margin-left:8%">
      <!--      <el-carousel :interval="4000" type="card" height="450px">-->
      <!--        <el-carousel-item v-for="item in imgList" :key="item.id">-->
      <!--          <img :src="item.idView" class="image">-->
      <!--        </el-carousel-item>-->
      <!--      </el-carousel>-->
    </div>
    <!--    下半部分主页面-->
    <div style="background-color: white; width: 1400px;margin-left: 1%;border-radius: 23px;">
      <div style="margin-left: 180px">
        <el-row>
          <el-col span="4.2"><el-button style="width: 200px;height: 200px" @click="handlerClick('chrome')">
            <img  style="width: 200px;height: 200px" src="../../../assets/sort1.jpg">
          </el-button></el-col>
          <el-col span="4.2"><el-button style="width: 200px;height: 200px" @click="handlerClick2('chrome')">
            <img  style="width: 200px;height: 200px" src="../../../assets/sort2.jpg">
          </el-button></el-col>
          <el-col span="4.2"><el-button style="width: 200px;height: 200px" @click="handlerClick3('chrome')"><img style="width: 200px;height: 200px" src="../../../assets/sort3.jpg"></el-button></el-col>
          <el-col span="4.2"><el-button style="width: 200px;height: 200px" @click="handlerClick4('chrome')"><img style="width: 200px;height: 200px" src="../../../assets/sort4.jpg"></el-button></el-col>
          <el-col span="4.2"><el-button style="width: 200px;height: 200px" @click="handlerClick5('chrome')"><img style="width: 200px;height: 200px" src="../../../assets/sort5.jpg"></el-button></el-col>
        </el-row>
        <el-row style="margin-left: 25px">
          <el-col span="4.5"><img style="width: 200px;height: 200px" src="../../../assets/sort6.jpg"></el-col>
          <el-col span="4.5"><img style="width: 200px;height: 200px" src="../../../assets/sort7.jpg"></el-col>
          <el-col span="4.5"><img style="width: 200px;height: 200px" src="../../../assets/sort8.jpg"></el-col>
          <el-col span="4.5"><img style="width: 200px;height: 200px" src="../../../assets/sort9.jpg"></el-col>
          <el-col span="4.5"><img style="width: 200px;height: 200px" src="../../../assets/sort10.jpg"></el-col>
        </el-row>
      </div>
      <div>
        <div>
          <span class="recommend">非处方药：</span>
          <el-link href="#" class="more">更多></el-link>
        </div>
        <el-row>
          <el-col>
            <el-card :body-style="{ padding: '0px' }" class="goods" v-for="(index) in man.slice(0,8)" shadow="hover"
                     :key="n">
              <a v-on:click="goodsMsg(index)">
                <img :src="index.img" alt="" class="goodsImg">
                <div class="goodsName">{{index.goods}}</div>
                <div style="width: 80px;margin-left: 60px" class="goodsBrand">{{index.brand}}</div>
                <div class="goodsPrice">￥{{index.price}}</div>
              </a>
              <el-button style="margin-left: 40px" type="warning" plain @click="pay(index)">直接购买</el-button>
              <el-button type="warning" class="el-icon-shopping-cart-2">加入购物车</el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div>
        <div>
          <span class="recommend">处方药：</span>
          <el-link href="#" class="more">更多></el-link>
        </div>
        <el-row>
          <el-col>
            <el-card :body-style="{ padding: '0px' }" class="goods" v-for="(index) in woman.slice(0,8)" shadow="hover"
                     :key="n">
              <a v-on:click="goodsMsg(index)">
                <img :src="index.img" alt="" class="goodsImg">
                <div class="goodsName">{{index.goods}}</div>
                <div style="width: 80px;margin-left: 60px" class="goodsBrand">{{index.brand}}</div>
                <div class="goodsPrice">￥{{index.price}}</div>
              </a>
              <el-button style="margin-left: 40px" type="warning" plain @click="pay(index)">直接购买</el-button>
              <el-button type="warning" class="el-icon-shopping-cart-2" >加入购物车</el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--      <div>-->
      <!--        <img src="../../../assets/end.png" style="width: 800px;height: 70px;margin-left:32%">-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      activeIndex: '1',
      goods: [],
      man: [],
      woman: [],
      // imgList: [
      //   {id: 0, idView: require("@/assets/bg1.jpg")},
      //   {id: 1, idView: require("@/assets/bg2.jpg")},
      //   {id: 2, idView: require("@/assets/bg3.jpg")},
      //   {id: 3, idView: require("@/assets/drug1.png")}
      // ]
    }
  },
  mounted() {
    this.manSport();
  },
  methods: {
    getTime() {
      var time = new Date();
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var min = time.getMinutes();
      m = m < 10 ? (m = "0" + m) : m;
      d = d < 10 ? (d = "0" + d) : d;
      h = h < 10 ? (h = "0" + h) : h;
      min = min < 10 ? (min = "0" + min) : min;
      return y + m + d + h + min;
    },
    createCode() {
      var code = 0;
      var num = 1;
      var codeLength = 4;//验证码的长度
      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//随机数
      for (var i = 0; i < codeLength; i++) {//循环操作
        var index = Math.floor(Math.random() * 10);//取得随机数的索引（0~35）
        code += random[index] * num;//根据索引取得随机数加到code上
        num = num * 10;
      }
      return code;
    },
    pay(goodsForm) {
      console.log(goodsForm);
      var orderId = this.getTime();
      var buyTime = orderId;
      orderId += this.createCode();
      var totalPrice = 0.0;
      totalPrice = goodsForm.price;
      let id = window.sessionStorage.getItem("id");
      if (id == null) {
        //未登录
        /*      window.sessionStorage.setItem("id", " ");*/
        this.$router.push({path: "/UserLogin"})
      } else {
        this.$http.post('http://localhost:8888/order/insert', {
          id: id,
          orderId: orderId,
          goods: goodsForm.goods,
          state: "未支付",
          amount: 1,
          price: totalPrice,
          address: window.sessionStorage.getItem("address"),
          buyTime: buyTime,
          img: goodsForm.img,
          size: "40"
        }, {emulateJSON: true});
        this.$http.post('http://localhost:8888/AliPay', {
          goods: goodsForm.goods,
          done_money: totalPrice,
          done_id: orderId
        }, {emulateJSON: true}).then(res => {
          if (res) {
            console.log(res.data.data);
            document.write(res.data.data);
          } else {
            this.$alert("错误：" + res, "提示", {
              confirmButtonText: '确定'
            });
          }
        })
      }
    },
    manSport() {
      // console.log('1');
      this.$http.post('http://localhost:8888/shopping',
        {type: 1},
        {emulateJSON: true}).then(res => {
        this.goods = res.data.data;
        const man = [];
        const woman = [];
        this.goods.forEach((item, index, list) => {
          if (item.sex == '男') {
            man.push(item);
          }
          ;
          if (item.sex == '女') {
            woman.push(item);
          }
        });

        this.man = man;
        this.woman = woman;
      })
    },
    goodsMsg(index) {
      this.$router.push({
        path: '/DetailsLayout',
        query: {
          price: index.price, brand: index.brand,
          img: index.img, goods: index.goods,
          img1: index.img1,
          img2: index.img2,
          img3: index.img3,
          detail1: index.detail1,
          detail2: index.detail2, detail3: index.detail3,
        }
      });
    },
    handlerClick(e){
      this.$router.push("/manSport");
    },
    handlerClick2(e){
      this.$router.push("/manSkate");
    },
    handlerClick3(e){
      this.$router.push("/manSlipper");
    },
    handlerClick4(e){
      this.$router.push("/womanSport");
    },
    handlerClick5(e){
      this.$router.push("/womanSkate");
    },
  }
}
</script>
<style scoped>

/*.el-carousel__item h3 {*/
/*  font-size: 14px;*/
/*  opacity: 0.75;*/
/*  line-height: 200px;*/
/*  margin: 0;*/
/*}*/

.recommend {
  margin-left: 70px;
  font-size: 30px;
  font-family: 黑体;
}

.more {
  float: right;
  margin-right: 70px;
  font-size: 30px;
  font-family: 黑体;
}

.goods {
  float: left;
  border: 0px solid #000;
  margin: 20px;
  width: 310px;
  height: 450px;
  border-radius: 23px;
}

.goodsImg {
  width: 309px;
  height: 300px;
  border-radius: 23px;
}

.goodsName {
  width: 309px;
  /*text-align: center;*/
  margin-left: 16%;
  float: left;

}

.goodsBrand {
  width: 20px;
  margin-left: 40%;
}

.goodsPrice {
  width: 20px;
  font-size: 25px;
  color: #d23030;
}

</style>
